<template>
    <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>添加试题:</span>
        <el-tree-select
          :props="defaultProps"
          v-model="ruleForm.subId"
          :data="levels"
          :render-after-expand="false"
          style="width: 240px;margin-left: 130px;"
        />
      </div>
    </template>

    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    
    <el-form-item label="试题类型: " prop="question">
      <el-select
        v-model="ruleForm.typeId"
        placeholder="选择题型"
        style="width: 240px"
        >
        <el-option
            v-for="item in type"
            :label="item.typeName"
            :value="item.id"
            :disabled="item.disabled"
        />
        </el-select>
    </el-form-item>
    <div v-if="ruleForm.typeId">
    <el-form-item label="题干: " prop="question">
      <el-input type="textarea" v-if="ruleForm.typeId>2" placeholder="请输入题目" v-model="ruleForm.question" />
      <div v-else>
            <el-input type="textarea" placeholder="请输入题目" v-model="ruleForm.body" />
            <el-input placeholder="请输入答案A" v-model="ruleForm.a" />
            <el-input placeholder="请输入答案B" v-model="ruleForm.b" />
            <el-input placeholder="请输入答案C" v-model="ruleForm.c" />
            <el-input placeholder="请输入答案D" v-model="ruleForm.d" />
      </div>
      
    </el-form-item>
    <el-form-item label="答案: " prop="answerTxt">
      <el-input v-if="ruleForm.typeId==4" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" v-model="ruleForm.answerTxt" />
    <el-radio-group v-if="ruleForm.typeId==3" v-model="ruleForm.answerTxt" class="ml-4">
        <el-radio value="正确" size="large" style="color:green">正确</el-radio>
        <el-radio value="错误" size="large" style="color:red">错误</el-radio>
    </el-radio-group>

      <div v-if="ruleForm.typeId<=2">
        <el-select v-if="ruleForm.typeId!=2" v-model="ruleForm.answerTxt" placeholder="单选题答案" style="width: 240px">
        <el-option
            v-for="item in abcd"
            :label="item.name"
            :value="item.value"
        />
        </el-select>
        <el-select v-else multiple v-model="ruleForm.sels" placeholder="多选题答案" style="width: 240px">
        <el-option
            v-for="item in abcd"
            :label="item.name"
            :value="item.value"
        />
        </el-select>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="upQuestion()">
        添加
      </el-button>
    </el-form-item>
    </div>
  <el-button @click="outQuestion()" style="position: relative;top: 32px;left: 135px;" type="primary">导出模板</el-button>
    <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="/api/question/question/UploadQuestion"
    multiple
    :on-preview="handlePreview"
    :on-success="handleAvatarSuccess"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
  >
  <el-button type="primary">word导入题库</el-button>
    <template #tip>
      <div class="el-upload__tip">
        请根据模板进行导入
      </div>
    </template>
  </el-upload>
  <el-button v-if="fileList.length!=0" type="primary" @click="addQs()">
    确定提交导入的题库
  </el-button>
  </el-form>
  </el-card>
<load :loading="addFlog"/>


</template>
<script setup>
import { findAllQuestion,questionDelete,questionUpdate,findAllType,findAllLevel,redisToMysql,outQuestionOne } from '@/api/admin/questions.js';
import { ref,onMounted,watch } from "vue";
import router from '@/router';
import { ElMessage,ElMessageBox,ElNotification } from 'element-plus'
import load from '@/views/load.vue'


const outQuestion=()=>{
  outQuestionOne().then(res=>{
    const blob = new Blob([res.data], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'example.docx';
    a.click();
    URL.revokeObjectURL(url);
  })
}

const fileList = ref([])
const defaultProps = {
  children: 'slearningProgress',
  label: 'levelName',
}
const handleRemove = (file, uploadFiles) => {
 
}

const handlePreview = (uploadFile) => {
 
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `一次只能提交三个文件哦`
  )
}

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `是否删除掉这个文件 ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}

const type=ref([])
const levels=ref([])

const abcd=ref([
    {
        name:"A",
        value:"A"
    },
    {
        name:"B",
        value:"B"
    },
    {
        name:"C",
        value:"C"
    },
    {
        name:"D",
        value:"D"
    },
])
const ruleForm=ref({})

const getLevel=()=>{
    findAllLevel().then(res=>{
        res.data.obj.forEach(element1 => {
          element1.value=element1.id
          element1.slearningProgress.forEach(element2 => {
            element2.value=element2.id
            element2.levelName=element2.name
            element2.slearningProgress=element2.ssubjects
            element2.slearningProgress.forEach(element3 => {
              element3.levelName=element3.subjectName
              element3.value=element3.id
            });
          });
          levels.value.push(element1)
        });
    })
}
getLevel()

const getType=()=>{
    findAllType().then(res=>{
        type.value=res.data.obj
    })
}
getType()

const addFlog=ref(false)
const addQs=()=>{
  if (ruleForm.value.subId!=null) {
    addFlog.value=true
    fileList.value.forEach(element => {
      redisToMysql(element.name,ruleForm.value.subId).then(res=>{
        if (res.data.code==200) {
          ElNotification({
            title: "文件 "+res.data.obj.fileName+' 重复或错误题目',
            message: '导入失败 '+res.data.obj.cuowu+" 个题目",
            type: 'error',
          })
          ElNotification({
            title: "文件 "+res.data.obj.fileName+' 成功导入',
            message: '成功导入 '+res.data.obj.zhengque+" 个题目",
            type: 'success',
          })
        addFlog.value=false
        }
      })
    });
    fileList.value=[]
  }else{
    ElMessage.error("请先选择需要添加题目的阶段")
  }
}

const upQuestion=()=>{
  if (ruleForm.value.subId!=null) {

    if (ruleForm.value.typeId<=2) {
      if (ruleForm.value.body!=null&&ruleForm.value.a!=null&&ruleForm.value.b!=null&&ruleForm.value.c!=null&&ruleForm.value.d!=null){
        ruleForm.value.question=ruleForm.value.body+"/"+ruleForm.value.a+"_"+ruleForm.value.b+"_"+ruleForm.value.c+"_"+ruleForm.value.d
        if (ruleForm.value.typeId==2) {
            var s=""
            ruleForm.value.sels.forEach(element => {
                s+=element
            });
            ruleForm.value.answerTxt=s
        }
      }
    }
    if (ruleForm.value.question==null) {
        ElMessage.error("题干不能为空")
    }else{
      questionUpdate(ruleForm.value).then(res=>{
        if (res.data.code==200) {
          ruleForm.value={}
          ElMessage.success("添加成功")
        }else{
          ElMessage.error(res.data.message)
        }
      })
    }
  }else{
    ElMessage.error("请先选择需要添加题目的阶段")
  }
}
</script>